<template>
  <div id="address" @click.self="hidden" v-if="show">
    <div :class="['alertTitel', { bigalertTitel: showalertTitel }]">
      {{ titel1 }}
    </div>
    <div class="addressBox">
      <div v-for="(item, index) in arr" :key="index">
        <span :class="item.font"></span
        ><input type="text" :placeholder="item.text" v-model="item.value" />
      </div>
      <div>
        <span class="el-icon-add-location"></span>
        <select name="city" @change="selectAddress">
          <option value="成都">成都</option>
          <option value="杭州">杭州</option>
          <option value="天津">天津</option>
        </select>
        <span class="newaddress">请选择地区</span>
      </div>

      <div>
        <span class="el-icon-location-information"></span
        ><span class="newaddress">{{ newaddress }}</span>
      </div>
      <span class="address-btn" @click="keepUse">保存并使用</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newaddress: "成都市",
      show: true,
      showalertTitel: false,
      titel1: "添加成功",
      arr: [
        { text: "收货人", font: "el-icon-user", value: "" },
        { text: "联系方式", font: "el-icon-phone", value: "" },
        { text: "收货地址", font: "el-icon-location-outline", value: "" },
      ],
    };
  },

  mounted() {},

  methods: {
    hidden() {
      this.show = !this.show;
    },
    selectAddress(e) {
      this.newaddress = e.target.value;
    },
    async keepUse() {
      let re = this.arr.every((el) => {
        return el.value;
      });
      if (re) {
        this.titel1 = "添加成功";
        this.hidden();
        this.arr.push({ value: this.newaddress });
        await this.axios("/ljy/addAddress", {
          params: { obj: JSON.stringify(this.arr) },
        });
        this.$store.commit('changeisAddress')//改为已经选择了地址
        this.showalertTitel = true;
        setTimeout(() => {
          this.showalertTitel = false;
        }, 1000);
      } else {
        this.titel1 = "请填写完整";
        this.showalertTitel = true;
        setTimeout(() => {
          this.showalertTitel = false;
        }, 1000);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#address {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  height: 800px;
  background-color: rgba($color: #000000, $alpha: 0.4);
  .addressBox {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    margin-top: 150px;
    padding-top: 10px;
    background-color: #f1f3f4;
    select {
      outline: none;
      vertical-align: middle;
    }
    div {
      width: 400px;
      height: 40px;
      font-size: 30px;
      color: rgb(170, 168, 168);
      margin: 0 auto;
      margin-top: 20px;
      background-color: white;
      border-radius: 10px;
    }
    .newaddress {
      font-size: 20px;
    }
    input {
      width: 350px;
      height: 28px;
      border: none;
      outline: none;
      vertical-align: middle;
    }
  }
  .address-btn {
    display: block;
    width: 150px;
    height: 40px;
    background-color: #ffdd00;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 15px;
    text-align: center;
    line-height: 40px;
  }
  .address-btn:hover {
    cursor: pointer;
  }
}
.alertTitel {
  position: fixed;
  width: 200px;
  height: 50px;
  text-align: center;
  color: white;
  line-height: 50px;
  background-color: rgba(0, 0, 0, 0.8);
  left: 40%;
  top: 40%;
  transform: scale(0);
}
.bigalertTitel {
  transform: scale(1);
}
</style>